import React, { Component } from 'react'
import axios from "axios";
import TabAlert from './TabAlert';
import { Toast } from "react-vant"

export class Alert extends Component {
    constructor(props) {
        super(props)

        this.state = {
            tabFlag: false, //控制tab切换小弹框的开关
            list: [],  //全部tab内容
            newArr: [],   //选中的标签数据
        }
    }

    // 请求数据 
    componentDidMount() {
        axios.get("/list").then(res => {
            this.setState({
                list: res.data,
            })
        })
    }

    // 1）点击tab内容区域的标签，添加到兴趣栏 
    addFn(title) {
        let { newArr } = this.state;
        if (!newArr.includes(title)) {  //判断已选中的里面是否存在。不存在，添加
            if (newArr.length < 15) {  //判断选中的百千是否是否少于15个，少于15个添加
                newArr.push(title);
            } else {
                Toast.info("最多添加15个标签") //提示
            }

        }

        this.setState({
            newArr: newArr
        })
    }

    // 2）删除兴趣栏中的内容---splice(index,1)
    delFn(index) {
        let { newArr } = this.state;
        newArr.splice(index, 1)
        if (newArr.length === 0) {
            Toast.info("您删除了所有选中的兴趣标签")
        }

        this.setState({
            newArr: newArr
        })
    }

    render() {
        const { flag, closeFn } = this.props;  //接收父组件传来的参数
        const { list, tabFlag, newArr } = this.state;
        return (
            <div className='mask'
                style={flag ? { display: "block" } : { display: "none" }} //弹框的显示隐藏
            >
                <div className="cont">
                    <span onClick={() => { closeFn() }}>X</span>
                    <div className='content'>
                        <div className='input'>
                            {/* 点击添加兴趣的标签，让tab切换的弹框显示  */}
                            兴趣：
                            <div className='Selected' onClick={() => {
                                this.setState({ //让tab弹框显示
                                    tabFlag: true,
                                })
                            }}>
                                {/* 把选中的内容渲染进去 */}
                                {
                                    newArr.length ?
                                        newArr.map((item, index) => { //因为只将内容渲染到数组中，没有id所以用index
                                            return <div key={index}>
                                                <span>{item}</span>
                                                <b onClick={this.delFn.bind(this, index)}>X</b>
                                            </div>
                                        }) : "暂无数据"
                                }
                            </div>
                        </div>

                        {/* tab切换弹框组件  */}
                        <TabAlert
                            list={list}  //数据
                            tabFlag={tabFlag} //开关
                            addFn={this.addFn.bind(this)} //点击添加到兴趣栏
                            newArr={newArr}
                        >

                        </TabAlert>
                    </div>
                </div>
                <div className='btns'>
                    <button onClick={() => { closeFn() }}>取消</button>
                    <button>提交</button>
                </div>

            </div>
        )
    }
}

export default Alert